<template>
<div class="page-container">
    <!-- 面包屑部分 -->
    <div class="breadcrumb">
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>营销中心</el-breadcrumb-item>
            <el-breadcrumb-item>优惠券</el-breadcrumb-item>
            <el-breadcrumb-item>优惠券统计</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="toolbar">

        <el-form :inline="true" :model="filters" :size="size" ref="filters">
            <el-row class="search-input">
                <el-row class="times" style="margin-right: 30px;">
                    <el-form-item label="活动时间：" prop="startTime">
                        <el-date-picker v-model="filters.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="开始时间" class="input_postion" clearable @change="changeStartDate" :picker-options="startDateDisabled"></el-date-picker>
                    </el-form-item>
                    <span class="times-to">-</span>
                    <el-form-item prop="endTime">
                        <el-date-picker v-model="filters.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss" placeholder="结束时间" class="input_postion" clearable @change="changeEndDate" :picker-options="endDateDisabled"></el-date-picker>
                    </el-form-item>
                </el-row>
                <el-form-item prop="promotionId" label="活动ID：">
                    <el-input clearable v-model="filters.promotionId" placeholder="活动ID" maxlength="80"></el-input>
                </el-form-item>
                <el-form-item prop="promName" label="活动名称：">
                    <el-input clearable v-model="filters.promName" placeholder="活动名称" maxlength="80"></el-input>
                </el-form-item>
            </el-row>
            <el-row class="search-button-noborder">
                <el-form-item>
                    <kt-button plain :label="$t('action.reset')" class="resetButton" icon="el-icon-refresh" @click="resetForm('filters')" />
                </el-form-item>
                <el-form-item>
                    <kt-button icon="el-icon-search" label="搜索" class="searchButton" @click="findCoupon" />
                </el-form-item>

            </el-row>
        </el-form>
    </div>
    <jic-table :height="350" :operationWidth="300" :tableList=" chartData" :tableHeaderList="tableHeaderList" :showIndex="false" :showOperation="false" :showBatchDelete="false" :showSelection="false"></jic-table>

    <!--

    <div class="common-wrap">
        <div v-for="(item,index) in chartData" :key="index" class="common-container">
            <p class="title">{{item.promName}}</p>
            <ve-pie :data="item" :settings="chartSettings" :extend="chartExtend"></ve-pie>
        </div>
    </div>

    <div v-if="chartData.length > 0" class="t_r mt30">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="filters.start" :page-sizes="[9]" :page-size="filters.limit" layout="total, sizes, prev, pager, next, jumper" :total="listTotal">
        </el-pagination>
    </div>-->

</div>
</template>

<script>
import {
    formatDate
} from "@/utils/datetime";
import KtButton from "@/views/Core/KtButton";
import VCharts from 'v-charts';
import jicTable from "@/components/jicComponentGallery/jicTable";
export default {
    components: {
        KtButton,
        jicTable
    },
    data() {

        // 设置统计图颜色
        this.chartExtend = {
            color: ["#879FFF", "#FF9F8B", "#99D956"]
        }
        return {
            tableHeaderList: [{
                    prop: "id",
                    label: "ID",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "promotionId",
                    label: "活动ID",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "useNum",
                    label: "已使用",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "receiveNum",
                    label: "已领取",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "noReceiveNum",
                    label: "未领取",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "grantTotalNum",
                    label: "发行数量",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "promName",
                    label: "优惠券名称",
                    minWidth: 100,
                    formatter: null
                },
                {
                    prop: "effectiveTime",
                    label: "有效期时间",
                    minWidth: 100,
                    formatter: null
                }
            ],
            listTotal: 0,
            filters: {
                promType: 11,
                start: 1,
                limit: 9,
                promName: null,
                promotionId: null,
                time: null,
                startTime: "",
                endTime: "",

            },
            size: "mini",
            time: '',
            chartSettings: {
                type: 'pie'
            },
            chartData: [],
            startDateDisabled: {}, //开始时间限制
            endDateDisabled: {}, //结束时间限制
        }
    },
    methods: {
        changeStartDate: function () {
            var this_ = this;
            this_.endDateDisabled = {
                disabledDate: time => {
                    if (this_.filters.startTime) {
                        return time.getTime() <= new Date(this_.filters.startTime).getTime();
                    }
                }
            };
        },
        changeEndDate: function () {
            var this_ = this;
            this_.startDateDisabled = {
                disabledDate: time => {
                    if (this_.filters.endTime) {
                        return time.getTime() >= new Date(this_.filters.endTime).getTime();
                    }
                }
            };
        },
        handleSizeChange(val) {

        },
        /**
         * 换页刷新
         */
        handleCurrentChange(val) {
            this.$set(this.filters, "start", val);
            this.findCoupon();
        },
        findCoupon() {
            this.utils.request.couponQueryCount(this.filters, res => {

                if (res.data.rows == null || res.data.rows.length < 1) {
                    // this.$message({"type":"warning","message":"查询暂无数据"})
                    this.listTotal = 0;
                    this.chartData = [];
                } else {
                    this.listTotal = res.data.total;
                    this.chartData = res.data.rows;
                }

            })
        },
        selectTime(val) {

            this.filters.startTime = formatDate(val[0], "yyyy-MM-dd hh:mm:ss")
            this.filters.endTime = formatDate(val[1], "yyyy-MM-dd hh:mm:ss")

        },
        resetForm(formName) {

            if (this.$refs[formName] != undefined) {
                this.$refs[formName].resetFields();
                this.filters.start = 1;
                this.filters.time = "";
                this.filters.startTime = null;
                this.filters.endTime = null;
                this.findCoupon();
            }
        },

    },
    mounted() {
        this.findCoupon();
    }
}
</script>

<style lang="scss" scoped>
.common-wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.title {
    margin: 30px auto;
    font-size: 18px;
}

/* 统计表格样式部分 */
.common-container {
    width: 32%;
    padding: 20px;
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: -2px 1px 10px 0px rgba(0, 0, 0, 0.3);
    height: 450px;
    margin-top: 20px;
}

/* 分页样式优化 */
.pagination-wrap {
    margin-top: 40px;
    text-align: right;
}
</style>
